import React from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { addCar } from '../store/slice/CarSlice'
import { useNavigate } from 'react-router-dom'
export default function GoodList() {
  const dispatch = useDispatch()
  const navigate = useNavigate()
  const { goods } = useSelector((state) => state.goods)
  return (
    <div>
      <h3>商品列表</h3>
      <ul>
        {goods.map((item) => {
          return (
            <li key={item.id}>
              <h3>商品名:{item.gname}</h3>
              <p>商品价格:{item.gprice}</p>
              <p>
                <button
                  onClick={() => {
                    dispatch(addCar(item))
                    navigate('/carlist')
                  }}
                >
                  加入购物车
                </button>
              </p>
            </li>
          )
        })}
      </ul>
    </div>
  )
}
